<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品管理</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>

</head>

<script>

	$(function(){
		getData();
	})

	function getData() {

		$.ajax({
			url:"/tbGoosController/getGoods",
			type:"post",
			dataType:"json",
			data:{goodsName:$("#goodsName").val()},
			async:true,
			success:function(page){

				var p = page.data;

				var table = "<table class=\"table table-bordered table-striped table-hover dataTable\">";
				table += "<tr>";
				table += "<th></th>";
				table += "<th class=\"sorting_asc\">商品ID</th>";
				table += "<th class=\"sorting\">商品名称</th>";
				table += "<th class=\"text-center\">商品价格</th>";
				table += "<th class=\"sorting\">一级分类</th>";
				table += "<th class=\"sorting\">二级分类</th>";
				table += "<th class=\"sorting\">三级分类</th>";
				table += "<th class=\"sorting\">状态</th>";
				table += "<th class=\"text-center\">操作</th>";
				table += "</tr>";
				$(p).each(function (i,e) {
					table += "<tr>";
					table += "<td><input name='box' type='checkbox' value='"+e.id+"'></td>";
					table += "<td>"+e.id+"</td>";
					table += "<td>"+e.goodsName+"</td>";
					table += "<td>"+e.price+"</td>";
					table += "<td>"+e.guo+"</td>";
					table += "<td>"+e.sheng+"</td>";
					table += "<td>"+e.shi+"</td>";
					if (e.auditStatus == 0){
						table+= '<td style="color: #00a65a">申请中</td>';
					}else if (e.auditStatus == 1){
						table+= '<td style="color: red">审核未通过</td>';
					}else if (e.auditStatus == 2){
						table+= '<td style="color: blue">审核通过</td>';
					}else{
						table+= '<td style="color: #787878">已驳回</td>';
					}
					table += "<td><button type='button' class='btn bg-olive btn-xs' data-toggle='modal' onclick='getById("+e.id+")' data-target='#insertEditModal'>详情</button></td>"
					table += "</tr>";
				})
				table += "</table>";

				$("#dataList").html(table);

			},
			error:function(){
				alert("系统异常，请联系管理员");
			}
		})
	}

	//审核通过
	function approvedGoods(){

		var boxs=document.getElementsByName("box");
		var h="";
		for (var i = 0; i < boxs.length; i++) {
			if(boxs[i].checked){
				h+=",'"+boxs[i].value+"'";
			}
		}
		h=h.substring(1);
		$.ajax({
			url:"/tbGoosController/approvedGoods",
			type:"get",
			datatype:"json",
			data:{ids:h},
			async:true,
			success:function(result){
				alert(result.member+","+result.content+","+JSON.stringify(result.data));
				getData();
			},
			error:function(result){
				alert("系统异常，请联系管理员！！！");
			}
		})
	}



	//审核通过
	function rejectedGoods(){

		var boxs=document.getElementsByName("box");
		var h="";
		for (var i = 0; i < boxs.length; i++) {
			if(boxs[i].checked){
				h+=",'"+boxs[i].value+"'";
			}
		}
		h=h.substring(1);
		$.ajax({
			url:"/tbGoosController/rejectedGoods",
			type:"get",
			datatype:"json",
			data:{ids:h},
			async:true,
			success:function(result){
				alert(result.member+","+result.content+","+JSON.stringify(result.data));
				getData();
			},
			error:function(result){
				alert("系统异常，请联系管理员！！！");
			}
		})
	}
	//详情
	function getById(obj) {
		alert(obj);
		$.ajax({
			url: "/tbGoosController/getFildAllId",
			data: {
				id:obj
			},
			type: "post",
			dataType: "json",
			success: function (result) {
				var map = result.data;
				console.log(map)
				$("#brand").val(map[2][0].brand);
				$("#category1Ids").text(map[1].category1Ids + "/");
				$("#category2Ids").text(map[1].category2Ids + "/");
				$("#category3Ids").text(map[1].category3Ids);
				$("#goodsName1").val(map[1].goodsName);
				$("#caption").val(map[1].caption);
				$("#price").val(map[1].price);
				$("#introduction").text(map[1].introduction);
				$("#packageList").text(map[1].packageList);
				$("#saleService").text(map[1].saleService);
				//回显图片
				var itemImages = JSON.parse(map[1].itemImages);
				var image ="";
				$(itemImages).each(function (i,e) {
					image += "<tr><td><input id='colorSee' value='" + e.color + "' style='border: 0px'></td><td><img id='url' src='" + e.url + "' width='100px' height='100px'></td><td><button onclick='deleteTr(this)' type='button' class='btn btn-default' title='删除'><i class='fa fa-trash-o'></i>删除</button></td></tr>";
				})
				$("#imgTemplate").html(image);
				//回显扩展属性
				var customAttributeItems = JSON.parse(map[1].customAttributeItems);
				var info = "";
				$(customAttributeItems).each(function (i, e) {
					info += "<div><div class='col-md-2 title'>" + e.text + "</div>";
					info += "<div class='col-md-10 data'>";
					info += "<input class='form-control' value='" + e.value + "'></div></div>";
				})
				$("#customAttributeItems").html(info)
				///
				var specificationItems = JSON.parse(map[1].specificationItems);
				var div = "";
				$(specificationItems).each(function (i, e) {

					div += "<div><div class='col-md-2 title'>" + e.attributeName + "</div>";
					div += "<div class='col-md-10 data'>" + e.attributeValue;
					div += "</div></div>";
				})
				$("#specId").html(div);
				//拼接库存
				var  itemlist = map[2];
				var  trList ="";
				$(itemlist).each(function (i, e) {
					var spec = JSON.parse(e.spec);
					trList +="<tr><td>" + spec.屏幕尺寸 + "</td><td>" + spec.网络制式 +"</td><td>";
					trList +="<input class='form-control'  value='" + e.price +"'>";
					trList +="</td><td><input class='form-control' value='" + e.num + "'>";
					trList +="</td><td><input type='checkbox' ></td><td><input type='checkbox' ></td></tr>";
				})
				$("#Kucun").html(trList);
			},
			error: function (result) {
				alert("系统异常，请联系管理员！！！")
			}
		})
	}


</script>

<body class="hold-transition skin-red sidebar-mini" >
  <!-- .box-body -->
                
                    <div class="box-header with-border">
                        <h3 class="box-title">商品审核</h3>
                    </div>

                    <div class="box-body">

                        <!-- 数据表格 -->
                        <div class="table-box">

                            <!--工具栏-->
                            <div class="pull-left">
                                <div class="form-group form-inline">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button>
                                        <button type="button" class="btn btn-default" onclick="approvedGoods()"  title="审核通过" ><i class="fa fa-check"></i> 审核通过</button>
                                        <button type="button" class="btn btn-default" onclick="rejectedGoods()" title="驳回" ><i class="fa fa-ban"></i> 驳回</button>
                                        <button type="button" class="btn btn-default" title="刷新" ><i class="fa fa-refresh"></i> 刷新</button>
                                    </div>
                                </div>
                            </div>
                            <div class="box-tools pull-right">
                                <div class="has-feedback">
                                    商品名称：<input id="goodsName">
									<button class="btn btn-default" onclick="getData()">查询</button>
                                </div>
                            </div>
                            <!--工具栏/-->

			                  <!--数据列表-->
			                  <table id="dataList" class="table table-bordered table-striped table-hover dataTable">

			                  </table>
			                  <!--数据列表/-->                        
							  
							 
                        </div>
                        <!-- 数据表格 /-->
                        
                        
                     </div>
                    <!-- /.box-body -->


  <!-- 编辑窗口 -->
  <div class="modal fade" id="insertEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-dialog" >
		  <div class="modal-content">
			  <div class="modal-header">
				  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				  <h3 id="myModalLabel">商品详细</h3>
			  </div>
			  <div class="modal-body">
				  <!-- 正文区域 -->
				  <section class="content">

					  <div class="box-body">

						  <!--tab页-->
						  <div class="nav-tabs-custom">

							  <!--tab头-->
							  <ul class="nav nav-tabs">
								  <li class="active">
									  <a href="#home" data-toggle="tab">商品基本信息</a>
								  </li>
								  <li >
									  <a href="#pic_upload" data-toggle="tab">商品图片</a>
								  </li>
								  <li >
									  <a href="#customAttribute" data-toggle="tab">扩展属性</a>
								  </li>
								  <li >
									  <a href="#spec" data-toggle="tab" >规格</a>
								  </li>
							  </ul>
							  <!--tab头/-->

							  <!--tab内容-->
							  <div class="tab-content">

								  <!--表单内容-->
								  <div class="tab-pane active" id="home">
									  <div class="row data-type">
										  <div class="col-md-2 title">商品分类</div>

										  <div class="col-md-10 data">
											  <table>
												  <tr><!--分类回显-->
													  <td id="category1Ids">
													  </td>
													  <td id="category2Ids">
													  </td>
													  <td id="category3Ids">
													  </td>
												  </tr>
											  </table>

										  </div>


										  <div class="col-md-2 title">商品名称</div>
										  <div class="col-md-10 data">
											  <input type="text" class="form-control"  id="goodsName1"   placeholder="商品名称" value="">
										  </div>

										  <div class="col-md-2 title" >品牌</div>
										  <div class="col-md-10 data">
											  <input id="brand" class="form-control" style="border: 0px">
										  </div>

										  <div class="col-md-2 title">副标题</div>
										  <div class="col-md-10 data">
											  <input type="text" class="form-control" id="caption"   placeholder="副标题" value="">
										  </div>

										  <div class="col-md-2 title">价格</div>
										  <div class="col-md-10 data">
											  <div class="input-group">
												  <span class="input-group-addon">¥</span>
												  <input type="text" class="form-control"  id="price" placeholder="价格" value="">
											  </div>
										  </div>

										  <div class="col-md-2 title editer">商品介绍</div>
										  <div class="col-md-10 data editer">
											  <span id="introduction"></span>
										  </div>

										  <div class="col-md-2 title rowHeight2x">包装列表</div>
										  <div class="col-md-10 data rowHeight2x">
											  <span id="packageList"></span>
										  </div>

										  <div class="col-md-2 title rowHeight2x">售后服务</div>
										  <div class="col-md-10 data rowHeight2x">
											  <span id="saleService"></span>
										  </div>


									  </div>
								  </div>

								  <!--图片上传-->
								  <div class="tab-pane" id="pic_upload">
									  <div class="row data-type">
										  <!-- 颜色图片 -->
										  <div class="btn-group">
											  <button type="button" class="btn btn-default" title="新建" data-target="#uploadModal"  data-toggle="modal"  ><i class="fa fa-file-o"></i> 新建</button>

										  </div>

										  <table  class="table table-bordered table-striped table-hover dataTable">
											  <thead>
											  <tr>

												  <th class="sorting">颜色</th>
												  <th class="sorting">图片</th>
												  <th class="sorting">操作</th>
											  </thead>
											  <tbody id="imgTemplate">

											  </tbody>
										  </table>

									  </div>
								  </div>


								  <!--扩展属性-->
								  <div class="tab-pane" id="customAttribute">
									  <div class="row data-type" id="customAttributeItems">

									  </div>
								  </div>

								  <!--规格-->
								  <div class="tab-pane" id="spec">
									  <div class="row data-type">
										  <div class="col-md-2 title">是否启用规格</div>
										  <div class="col-md-10 data">
											  <input type="checkbox" >
										  </div>
									  </div>
									  <p>



									  <div class="row data-type" id="specId">

									  </div>
									  <div class="row data-type">
										  <table class="table table-bordered table-striped table-hover dataTable">
											  <thead>
											  <tr>
												  <th class="sorting">屏幕尺寸</th>
												  <th class="sorting">网络制式</th>
												  <th class="sorting">价格</th>
												  <th class="sorting">库存</th>
												  <th class="sorting">是否启用</th>
												  <th class="sorting">是否默认</th>
											  </tr>
											  </thead>
											  <tbody id="Kucun">


											  </tbody>
										  </table>

									  </div>

								  </div>
							  </div>

						  </div>
						  <!--tab内容/-->
						  <!--表单内容/-->

					  </div>
				  </section>
				  <div class="modal-footer">
					  <button class="btn btn-success"  data-dismiss="modal" aria-hidden="true">保存</button>
					  <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
				  </div>
			  </div>
		  </div>
	  </div>
  </div>
</body>

</html>